<template>
  <div class="index-wrap">
    <AppSidebar
      :sidebar-routers="sidebarRouters"
      @menuSelect="menuSelect"
    ></AppSidebar>
    <div class="content">
      <nuxt-child />
    </div>
  </div>
</template>

<script>
export default {
  name: 'IndexPage',
  data() {
    return {
      sidebarRouters: [
        {
          path: '/',
          hidden: false,
          meta: {
            title: '首页',
            icon: 'user',
          },
        },
        {
          path: '/',
          hidden: false,
          meta: {
            title: '列表',
            icon: 'user',
          },
          children: [
            {
              path: 'about',
              hidden: false,
              meta: {
                title: '关于我们',
                icon: '',
              },
            },
            {
              path: 'user',
              hidden: false,
              meta: {
                title: '用户中心',
                icon: '',
              },
            },
          ],
        },
      ],
    }
  },
  methods: {
    menuSelect(path) {
      console.log(path)
    },
  },
}
</script>

<style lang="scss" scoped>
.index-wrap {
  width: 100%;
  display: flex;
  .content {
    width: calc(100% - 260px);
    padding: 20px;
    margin-left: 20px;
    box-shadow: 0 0 5px #ccc;
  }
}
</style>
